<script>
  export default {
    layout: 'admin',
    data() {
      /**
       * 校验省市区四级级联
       * @param rule
       * @param {number} value
       * @param {function} callback 回调函数
       */
      let checkAuditRemark = (rule, value, callback) => {
        let auditForm = this.auditForm;
        if (auditForm.status === 1 && !value) {
          return callback(new Error('审核拒绝，审核回复不能为空'))
        }
        // 校验通过
        callback();
      }
      return {
        // 商店老板列表
        bossList: [],
        // 正在显示的商店老板所在下标
        showIndex: 0,
        // 待审核商店老板对象
        boss: {
          // 主键
          id: undefined,
          // 名称
          name: undefined,
          // 相同名称下标数组
          nameList: [],
          // 性别[0-男 1-女]
          gender: undefined,
          // 身份证号
          idCard: undefined,
          // 相同身份证号下标数组
          idCardList: [],
          // 手机号
          mobile: undefined,
          // 相同手机号下标数组
          mobileList: [],
          // 序号
          sort: undefined
        },
        // 商店账户审核记录列表
        auditGroupList: [],
        // 页面模块列表
        module: {
          // 历史审核记录模块
          historyAuditM: {
            // 模块名称
            name: '历史审核记录',
            // 模块ref名称
            refName: 'historyAuditRef',
            // 展开状态[true-展开 false-收缩]
            isExpand: true,
          },
          // 审核通过老板列表信息模块
          bossListM: {
            name: '已有老板信息',
            refName: 'bossListRef',
            isExpand: true,
          },
          // 待审核老板信息模块
          bossM: {
            name: '待审核老板信息',
            refName: 'bossRef',
            isExpand: true,
          },
          // 审核模块
          auditM: {
            name: '审核',
            refName: 'auditRef',
            isExpand: true,
          }
        },
        // 审核表单对象
        auditForm: {
          // 商店主键
          storeId: undefined,
          // 商店老板主键
          bossId: undefined,
          // 审核类型
          type: undefined,
          // 审核结果[0-通过 1-拒绝]
          status: undefined,
          // 审核备注
          auditRemark: ""
        },
        // 审核表单数据校验规则对象
        auditRules: {
          status: [
            { required: true, message: '审核结果不能为空', trigger: 'blur' }
          ],
          auditRemark: [
            { required: true, validator: checkAuditRemark, trigger: 'blur' }
          ],
        },
        // 数据加载状态[false-不加载 true-加载]
        dataLoad: false,
        // 按钮状态[false-可用 true-禁用]
        buttonLoad: false,
        // 商店管理页面检索参数
        prePageSearchForm: ''
      }
    },
    computed: {
      // 当前正在显示的商店老板
      bossForm() {
        const bossForm = this.bossList[this.showIndex];
        if (!bossForm) {
          return {};
        }
        return bossForm;
      }
    },
    filters: {
      // 性别名称映射
      genderName(gender) {
        if (gender == null) {
          return '';
        }
        return gender === 0 ? '男' : '女';
      }
    },
    created() {
      if (process.server) {
        return;
      }
      const params = this.$route.params;
      if (!params.storeId) {
        return this.$router.replace({
          name: 'admin-store-assign',
          params: { searchForm: this.prePageSearchForm }
        });
      }
      // 记录商店主键
      this.auditForm.storeId = params.storeId;
      // 审核类型
      this.auditForm.type = params.type;
      // 记录上一个页面的参数
      this.prePageSearchForm = params.prePageSearchForm;

      // 获取商店账户审核数据
      this.getBossAuditDetail(params.storeId);
    },
    methods: {
      /**
       * 获取商店老板审核数据方法
       * @param {string} storeId 商店主键
       */
      getBossAuditDetail(storeId) {
        // 开始加载
        this.dataLoad = true;
        this.$axios.$get('/audit-store/boss/detail', { params: { storeId }})
          .then(({ data }) => {
            this.bossList = data.bossList;

            const boss = this.boss;
            const resBoss = data.boss;
            for (let propKey in boss) {
              if (resBoss.hasOwnProperty(propKey)) {
                boss[propKey] = resBoss[propKey];
              }
            }
            this.auditGroupList = data.auditGroupList;
            // 计算相同数据
            this.mathEquals();
          })
          .catch(() => {})
          .finally(() => {
            // 加载结束
            this.dataLoad = false;
          });
      },
      /**
       * 计算待审核账户和已有账户的雷同信息
       */
      mathEquals() {
        const boss = this.boss;
        const bossList = this.bossList;

        for (let i = 0; i < bossList.length; i++) {
          let bossElement = bossList[i];
          for (let propKey in bossElement) {
            if (bossElement[propKey] === boss[propKey]) {
              const key = propKey + 'List';
              if (boss.hasOwnProperty(key)) {
                boss[key].push(i + 1);
              }
            }
          }
        }
      },
      /**
       * 提交审核结果事件
       */
      submitHandle() {
        this.$refs.auditForm.validate()
          .then(() => {
            this.buttonLoad = true;

            const auditForm = this.auditForm;
            const boss = this.boss;
            auditForm.bossId = boss.id;

            return this.$axios.$post('/audit-store/boss/save', auditForm);
          })
          .then(() => {
            this.notify('success', '操作成功', '商店老板审核完成');

            this.backPrePageHandle();
          })
          .catch(() => {})
          .finally(() => {
            this.buttonLoad = false;
          });
      },
      /**
       * 返回商店管理页事件
       */
      backPrePageHandle() {
        // 跳回管理页面
        this.$router.replace({ name: 'admin-store-assign', params: { searchForm: this.prePageSearchForm }});
      },
      /**
       * 页面滚动事件
       * @param {string} refName 标签ref名称
       */
      scrollHandle(refName) {
        const targetDiv = this.$refs[refName]
        let contentBoxDiv = this.$refs.contentBox.$el;
        // 获取元素距离顶部距离
        let top = targetDiv.offsetTop - contentBoxDiv.offsetTop;
        // 滚动到指定div
        window.scrollTo({
          top: top,
          behavior: "smooth",
        });
      },
      /**
       * 审核备注分割方法
       * @param auditRemark 审核备注
       * @return {string[]} 审核备注数组
       */
      auditRemarkSplit(auditRemark) {
        if (!auditRemark) {
          return [];
        }
        return auditRemark.split("\n");
      },
      /**
       * 获取el-tag类型方法
       * @param {number} status      状态
       * @param {number} auditStatus 审核状态
       */
      getTagType(status, auditStatus) {
        if (auditStatus === 0) {
          // 审核中
          return 'info';
        }
        if (status === 1 || auditStatus === 2) {
          /*
            status === 1：     禁用
            auditStatus === 2：审核拒绝
           */
          return 'danger';
        }
        return 'success';
      },
    }
  }
</script>

<template>
  <div class="boss-audit-page">
    <el-row :gutter="10">
      <!-- 左侧 start -->
      <el-col :span="20"
              ref="contentBox"
              v-loading="dataLoad"
              element-loading-text="数据加载中..."
              element-loading-spinner="el-icon-loading"
              class="content-box">
        <div :ref="module.historyAuditM.refName" class="module-box">
          <span class="m-title">{{ module.historyAuditM.name }}</span>
          <span @click="module.historyAuditM.isExpand = !module.historyAuditM.isExpand" class="m-btn">
            {{ module.historyAuditM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <el-timeline v-if="module.historyAuditM.isExpand" class="audit-box">
            <el-timeline-item v-for="(auditGroup, index) in auditGroupList"
                              :key="'auditGroup' + index"
                              :timestamp="auditGroup.name"
                              placement="top"
                              color="#0bbd87">
              <el-card v-for="audit in auditGroup.list"
                       :key="'audit' + audit.id"
                       :body-style="{ padding: '10px' }"
                       class="audit">
                <div class="title">
                  {{ audit.status === 0 ? '通过' : '拒绝'}}
                </div>
                <div v-if="audit.auditRemark" class="auditRemark">
                  <div v-for="(remark, index) in auditRemarkSplit(audit.auditRemark)" :key="'auditRemark' + index">
                    {{ remark }}
                  </div>
                </div>
                <div class="user">
                  <span>{{ audit.createUser }}</span>
                  提交于
                  <span>{{ audit.createTime }}</span>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-collapse-transition>
        <div :ref="module.bossListM.refName" class="module-box">
          <span class="m-title">{{ module.bossListM.name }}</span>
          <span @click="module.bossListM.isExpand = !module.bossListM.isExpand" class="m-btn">
            {{ module.bossListM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <div v-if="module.bossListM.isExpand" class="account-box">
            <div class="account-list">
              <el-tag v-for="(boss, index) in bossList"
                      :key="'boss' + boss.id"
                      @click="showIndex = index"
                      :type="getTagType(boss.status, boss.auditStatus)"
                      :effect="showIndex === index ? 'light' : 'plain'"
                      disable-transitions
                      class="boss-tag">
                <span>{{ boss.name }}</span>
                <span class="default-status">{{ boss.defaultStatus === 0 ? '默认' : '普通'}}</span>
              </el-tag>
            </div>
            <el-form size="mini" label-width="100px" ref="accountForm">
              <el-form-item label="老板姓名" prop="name">
                <el-input v-model="bossForm.name" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="老板性别" prop="gender">
                <el-input :value="bossForm.gender | genderName" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="bossForm.idCard" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="bossForm.mobile" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="序号">
                <el-input v-model="bossForm.sort" readonly class="width30Percent"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-transition>
        <div :ref="module.bossM.refName" class="module-box">
          <span class="m-title">{{ module.bossM.name }}</span>
          <span @click="module.bossM.isExpand = !module.bossM.isExpand" class="m-btn">
            {{ module.bossM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <div v-if="module.bossM.isExpand" class="audit-account-box">
            <el-form size="mini" label-width="100px" ref="auditAccountForm">
              <el-form-item label="老板姓名" prop="name">
                <el-input v-model="boss.name" readonly class="width30Percent"
                          :class="{'is-equals': boss.nameList.length > 0}">
                </el-input>
                <div v-if="boss.nameList.length > 0" class="equals-box">
                  与 <span class="equals">{{ JSON.stringify(boss.nameList) }}</span> 老板名称相同
                </div>
              </el-form-item>
              <el-form-item label="老板性别" prop="gender">
                <el-input :value="boss.gender | genderName" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="boss.idCard" readonly class="width30Percent"
                          :class="{'is-equals': boss.idCardList.length > 0}">
                </el-input>
                <div v-if="boss.idCardList.length > 0" class="equals-box">
                  与 <span class="equals">{{ JSON.stringify(boss.idCardList) }}</span> 老板身份证号相同
                </div>
              </el-form-item>
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="boss.mobile" readonly class="width30Percent"
                          :class="{'is-equals': boss.mobileList.length > 0}">
                </el-input>
                <div v-if="boss.mobileList.length > 0" class="equals-box">
                  与 <span class="equals">{{ JSON.stringify(boss.mobileList) }}</span> 老板手机号相同
                </div>
              </el-form-item>
              <el-form-item label="序号">
                <el-input v-model="boss.sort" readonly class="width30Percent"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-transition>
        <div :ref="module.auditM.refName" class="module-box">
          <span class="m-title">{{ module.auditM.name }}</span>
          <span @click="module.auditM.isExpand = !module.auditM.isExpand" class="m-btn">
            {{ module.auditM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <el-form v-if="module.auditM.isExpand" :model="auditForm" :rules="auditRules" size="mini" label-width="100px"
                   ref="auditForm">
            <el-form-item label="审核结果" prop="status">
              <el-radio-group v-model="auditForm.status">
                <el-radio :label="0" border>通过</el-radio>
                <el-radio :label="1" border>拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审核回复" prop="auditRemark">
              <el-input
                type="textarea"
                placeholder="请输入审核回复"
                v-model="auditForm.auditRemark"
                :rows="4"
                maxlength="250"
                show-word-limit
                resize="none"
                class="width50Percent"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button :disabled="buttonLoad" type="primary" size="small" @click="submitHandle">
                提 交
              </el-button>
              <el-button :disabled="buttonLoad" size="small" @click="backPrePageHandle" class="back-btn">
                返 回
              </el-button>
            </el-form-item>
          </el-form>
        </el-collapse-transition>
      </el-col>
      <!-- 左侧 end -->
      <!-- 有侧 start -->
      <el-col :span="4">
        <el-card :body-style="{ padding: '15px' }" class="nav-box">
          <div v-for="m in module" :key="'nav' + m.refName" @click="scrollHandle(m.refName)" class="nav-btn">
            {{ m.name }}
          </div>
        </el-card>
      </el-col>
      <!-- 有侧 end -->
    </el-row>
  </div>
</template>

<style scoped>
  .boss-audit-page {

  }
  .boss-audit-page .content-box .module-box {
    background-color: #F2F6FC;
    border-radius: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
    line-height: 35px;
  }
  .boss-audit-page .content-box .module-box .m-title {
    font-size: 18px;
    font-weight: bold;
  }
  .boss-audit-page .content-box .module-box .m-btn {
    float: right;
    font-size: 14px;
    margin-right: 20px;
    cursor: pointer;
  }
  .boss-audit-page .content-box .audit-box {
    margin-left: 10px;
    max-height: 300px;
    overflow-y: auto;
  }
  .boss-audit-page .content-box .audit-box .audit {
    width: 50%;
    margin-top: 10px;
  }
  .boss-audit-page .content-box .audit-box .audit .title {
    font-size: 16px;
    font-weight: bold;
  }
  .boss-audit-page .content-box .audit-box .audit .auditRemark {
    font-size: 15px;
    margin-top: 5px;
    color: #f81313;
  }
  .boss-audit-page .content-box .audit-box .audit .user {
    margin-top: 10px;
  }
  .boss-audit-page .content-box .audit-box .audit .user span {
    font-size: 14px;
    color: #909399;
    margin-top: 5px;
  }
  .boss-audit-page .content-box .account-box .account-list {
    margin-bottom: 10px;
  }
  .boss-audit-page .content-box .account-box .account-list .boss-tag {
    margin-left: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .boss-audit-page .content-box .account-box .account-list .boss-tag .default-status {
    color: #c0c4cc;
  }
  .boss-audit-page .content-box .audit-account-box .equals-box {
    font-size: 12px;
    color: #f81313;
  }
  .boss-audit-page .content-box .audit-account-box .is-equals >>> .el-input__inner {
    color: #0bc99c;
  }
  .boss-audit-page .nav-box {
    width: 205px;
    position: fixed;
    top: 110px;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
  .boss-audit-page .nav-box .nav-btn {
    line-height: 30px;
    font-weight: bold;
    cursor: pointer;
  }
  .boss-audit-page .nav-box .nav-btn:hover {
    background-color: #F2F6FC;
  }
</style>

<style scoped>
  .boss-audit-page .width30Percent {
    width: 30%;
  }
  .boss-audit-page .width50Percent {
    width: 50%;
  }
</style>
